<template>
  <view class="queryWelfare">
    <uni-nav-bar title="查询" color="#333" statusBar></uni-nav-bar>
    <!-- 查询领取福利 -->
    <view class="search">
      <view class="search_phone">
        <input type="number" placeholder="请输入手机号" maxlength="4" v-model="phone" />
        <!-- TODO check size -->
        <uni-icons type="search" color="#2979ff" size="30"></uni-icons>
      </view>
      <view class="search_bottom" @click="submit">查询</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/navigator';
import { showToast } from '@/utils/prompt';
import { Ref, ref } from 'vue';

const phone: Ref<number> = ref(null);

function submit() {
  if (!phone.value) {
    showToast('请输入手机号码后四位');
    return;
  } else {
    navTo(`welfare/queryWelfare?phone=${phone.value}`);
    phone.value = null;
  }
}
</script>

<style lang="less">
@import url('../welfare/less/queryWelfare.less');
</style>
